<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link href="css/mui.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/loading.min.css" />
<link href="fonts/iconfont.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
<div id="app">
	<header class="mui-bar mui-bar-nav in-bar">    
		<a href="javascript:window.hostory.go(-1)" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<a href="index.htm" class="mui-icon mui-icon-home mui-pull-left"></a>
		<h1 class="mui-title" v-text="title"></h1>
		<a href="javascript:window.location.href='search.htm'" id="searchIcon" class="mui-icon mui-icon-search mui-pull-right"></a>
	</header> 

	<!-- 分类 -->
	<div class="channelBox fixChannel">
        <div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted channel">
			<div class="mui-scroll">
				<a href="" class="mui-control-item" :class="{'mui-active':999 == thisActive}">全部</a>	
				<a href="javascript:void(0)" class="mui-control-item" v-for="(vo,index) in guanzhu" v-on:tap="ref(index,vo.id)" :class="{'mui-active':index == thisActive}">{{vo.title}}</a>	
			</div>					
		</div>
		<div class="dingyue">
			<a href="dingyue.htm">
    		<i class="mui-icon mui-icon-plusempty"></i> 
    		</a>
    	</div>
	</div>

	<nav class="mui-bar mui-bar-tab">
	    <a href="index.htm" class="mui-tab-item">
	        <span class="mui-icon mui-icon-home"></span>
	        <span class="mui-tab-label">首页</span>
	    </a>
	    <a href="list.htm?t=NL&type=BN" class="mui-tab-item my-tab">
	        <span class="icon icon-yumi"></span>
	        <span class="mui-tab-label">能量类</span>
	    </a>
	    <a href="list.htm?t=DB&type=BD" class="mui-tab-item my-tab">
	        <span class="icon icon-danbaizhi"></span>
	        <span class="mui-tab-label">蛋白类</span>
	    </a>
	    <a href="list.htm?t=TJJ&type=BT" class="mui-tab-item my-tab">
	        <span class="icon icon-huaxueshiji"></span>
	        <span class="mui-tab-label">添加剂</span>
	    </a>
	    <a href="list.htm?t=YZ&type=BY" class="mui-tab-item my-tab">
	        <span class="icon icon-cunqianguan"></span>
	        <span class="mui-tab-label">养殖</span>
	    </a>
	    <a href="setting.htm" class="mui-tab-item my-tab">
	        <span class="icon icon-huiyuan"></span>
	        <span class="mui-tab-label">个人</span>
	    </a>
	</nav>
	
	<div id="my-scroll" class="mui-content mui-scroll-wrapper" style="padding-top: 84px">
        <div class="mui-scroll">
            <!-- 主界面具体展示内容 -->				    
			<div class="box bg-white">
			    <ul class="mui-table-view">
			        <li class="mui-table-view-cell mui-media my-media" v-for="vo in list">
			        	<a :href="vo.url" style="margin: 0; white-space: normal;">
		                <img class="mui-media-object mui-pull-left" :src="vo.imgurl">
		                <div class="mui-media-body">
		                	{{vo.title}}
		                	<div style="padding: 5px 0">
		                    <p class="mui-pull-left">
		                    	<i class="icon icon-shijian"></i>
		                    	<span v-text="vo.time"></span>
		                    </p>
		                    <p class="mui-pull-right">
		                    	<i class="icon icon-yanjing"></i>
		                    	<span v-text="vo.num"></span>
		                    </p>
		                    </div>
		                </div>	
		                </a>			            
			        </li>

			        <div id="loadding" class="loadding">
						<span class="mui-spinner"></span>
					</div>	
			    </ul>
			</div>
			
        </div>
    </div>

	
</div>
<script src="js/mui.min.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/loading.js"></script>
<script src="js/app.js"></script>
<script type="text/javascript" charset="utf-8">	
app.init();
mui('body').on('tap','a',function(){document.location.href=this.href;});
if(request.type=='' || request.type==undefined){
	alert("参数错误");	
	window.history.go(-1);
}
var vm = new Vue({
	el:"#app",
	data:{
		guanzhu:[],
		type:request.type,
		title:request.title,
		list:[],
		thisActive:999,
		page : 0,
		canScroll : 1,
		next : 1,
	},
	created : function(){		
		that = this;

		that.goPage();//初始加载

		mui.showLoading('数据加载中');
		request = {
			command:1,
			udid:uuid,
			column:'VIPLM'
		};
		mui.get(api,request,function(res){	//关注列表
			mui.hideLoading();				
			that.guanzhu = res.body.columns;			
		},'json');
	},
	methods: {
		ref : function(index,id){
			this.thisActive = index;
			that.type = id;
			that.page = 0;
			that.list = [];
			this.goPage();
		},
		goPage : function(){
			var that = this;
        	that.canScroll = 0;
        	document.getElementById("loadding").className="loadding";  
			request = {
				command:2,
				udid:uuid,
				column:'AAAA',
				type:that.type,
				page:that.page
			};
			mui.get(api,request,function(res){//文章列表				
				document.getElementById("loadding").className="hide"; 	
				that.columns = res.body.columns;
				that.list = that.list.concat(res.body.item);
				that.next = res.body.next;
				that.canScroll = 1;
			},'json');
		}
	},
	updated : function(){
		mui('.mui-scroll-wrapper').scroll();  
		var scroll = mui('.mui-scroll-wrapper').scroll();
		var mainScroll = mui('#my-scroll').scroll();
		document.getElementById('my-scroll').addEventListener('scroll', function (e ) {		
			if (mainScroll.maxScrollY > mainScroll.y){
				if(that.canScroll==0 || that.next==0){//不要重复加载				
					return;
				}
				that.page++;   
				that.goPage(that.page);	
			};
		}) 
	}
});

</script>
</body>
</html>